<template>
  <div>
    <div class="all">
    	<div v-show="showLoading" id="loading"></div>
    	<div v-show="showBtn" id="ply-btn" @click="playVideo()"></div>
    </div>

    <div id="video-cover" v-show="showVideo">
    	<img src="/static/img/cover.png">
    </div>

	<video 
		id="video1" 
		webkit-playsinline="true" 
		playsinline="true" 
		type="video/mp4" 
		preload="" 
		x5-video-player-type="h5" 
		src="/static/video/2e43924ad5191b4541e2d29f74467d89.mp4">
	</video>


  </div>
</template>

<script>
export default {
	data() {
		return {
			video: null,
			showVideo: false,
			showBtn: false,
			showLoading: true,
		}
	},

	mounted: function() {
		let video = document.getElementById("video1")

		let loadingWidth = $('#loading').width()
		let loadingHeight = loadingWidth / 1080 * 1920

		$('#loading').css('height', `${loadingHeight}px`)



		let setShowBtn = this.setShowBtn
		let setShowLoading = this.setShowLoading
		let getShowLoading = this.getShowLoading


		video.addEventListener("canplay", function() {
			if (getShowLoading()) {
				setShowLoading(false)
				setShowBtn(true)
			}
		})

		video.oncanplaythrough = function() {
			if (getShowLoading()) {
				setShowLoading(false)
				setShowBtn(true)
			}
		}

		setTimeout(()=>{
			if (getShowLoading()) {
				setShowLoading(false)
				setShowBtn(true)
			}
		}, 5000)

		let router = this.$router

		// 视频播放结束
		video.addEventListener("ended",function(){
	        router.push({path: 'download'})
	    })

	},

	methods: {
		playVideo: function() {

			this.showVideo = true
			$('.all').css('display', 'none')

			let tl = new TimelineLite()
			tl
			.from("#video-cover", 0.5, {
				scale: 0,
			})
			.call(function() {
				$('#video1').css('width', '100%')
			})
			setTimeout(()=>{
				$("#video-cover").css('display', 'none')
				document.getElementById("video1").play()
			}, 500)
	
		},

		setShowBtn: function(bool) {
			this.showBtn = bool
			if(bool) {
				TweenMax.from("#ply-btn", 1.5, {
					opacity: 0.3,
					// scale: 0.5,
				}).repeat(-1)
			}
		},

		setShowLoading: function(bool) {
			this.showLoading = bool
		},

		getShowLoading: function() {
			return this.showLoading
		},

	}
  
}
</script>